<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>上报目录列表</title>
</head>

<body>
    <div th:fragment="upDataCatalog">
        <div class="search-form">
            <form id="upDataCatalogSearchForm" th:action="@{/fragments/up-data-catalog}" method="get">
                <div class="form-row">
                    <div class="form-group">
                        <label for="search-cataTitle">目录标题：</label>
                        <input type="text" id="search-cataTitle" name="cataTitle" placeholder="请输入目录标题"
                            th:value="${cataTitle}">
                    </div>
                    <div class="form-group">
                        <label for="search-internalOrgName">组织机构：</label>
                        <input type="text" id="search-internalOrgName" name="importedByOrgName" placeholder="请输入组织机构名称"
                            th:value="${importedByOrgName}">
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="page" value="1">
                        <input type="hidden" name="limit" th:value="${limit}">
                        <button class="search-btn" type="submit">查询</button>
                        <button class="reset-btn" type="button" onclick="resetUpDataCatalogSearch()">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="table-container">
            <table class="data-table" id="updatacatalog-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>基本要素目录ID</th>
                        <th>扩展目录ID</th>
                        <th>扩展目录标题</th>
                        <th>业务分组名称</th>
                        <th>扩展目录编码</th>
                        <th>字段类型</th>
                        <th>字段类型名称</th>
                        <th>任务目录名称</th>
                        <th>任务目录编码</th>
                        <th>使用层级</th>
                        <th>描述</th>
                        <th>扩展数据目录编码</th>
                        <th>共享条件</th>
                        <th>来源事项名称</th>
                        <th>来源事项编码</th>
                        <th>关联事项名称</th>
                        <th>关联事项编码</th>
                        <th>重要程度</th>
                        <th>处理级别</th>
                        <th>区域范围</th>
                        <th>其他区域范围</th>
                        <th>时间范围</th>
                        <th>内部机构名称</th>
                        <th>组织代码</th>
                        <th>扩展描述</th>
                        <th>更新周期</th>
                        <th>其他更新周期</th>
                        <th>是否发布</th>
                        <th>未发布原因</th>
                        <th>区域名称</th>
                        <th>区域代码</th>
                        <th>目录类型</th>
                        <th>扩展目录版本</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>CD时间</th>
                        <th>CD批次</th>
                        <th class="sticky-column">操作</th>
                    </tr>
                </thead>
                <tbody id="updatacatalog-table-body">
                    <tr th:if="${upDataCatalogList != null and !upDataCatalogList.empty}"
                        th:each="item : ${upDataCatalogList}">
                        <td th:text="${item.id ?: ''}"></td>
                        <td th:text="${item.baseCataId ?: ''}"></td>
                        <td th:text="${item.extCataId ?: ''}"></td>
                        <td th:text="${item.extCataTitle ?: ''}"></td>
                        <td th:text="${item.businessGroupName ?: ''}"></td>
                        <td th:text="${item.extCataCode ?: ''}"></td>
                        <td th:text="${item.fieldType ?: ''}"></td>
                        <td th:text="${item.fieldTypeName ?: ''}"></td>
                        <td th:text="${item.taskCatalogName ?: ''}"></td>
                        <td th:text="${item.taskCatalogCode ?: ''}"></td>
                        <td th:text="${item.useLevel ?: ''}"></td>
                        <td th:text="${item.description ?: ''}"></td>
                        <td th:text="${item.extDataCataCode ?: ''}"></td>
                        <td th:text="${item.sharedCondition ?: ''}"></td>
                        <td th:text="${item.sourceItemName ?: ''}"></td>
                        <td th:text="${item.sourceItemCode ?: ''}"></td>
                        <td th:text="${item.relationItemName ?: ''}"></td>
                        <td th:text="${item.relationItemCode ?: ''}"></td>
                        <td th:text="${item.importanceLevel ?: ''}"></td>
                        <td th:text="${item.pocessLevel ?: ''}"></td>
                        <td th:text="${item.aeraScope ?: ''}"></td>
                        <td th:text="${item.otherAeraScope ?: ''}"></td>
                        <td th:text="${item.timeRange ?: ''}"></td>
                        <td th:text="${item.internalOrgName ?: ''}"></td>
                        <td th:text="${item.orgCode ?: ''}"></td>
                        <td th:text="${item.extDescription ?: ''}"></td>
                        <td th:text="${item.updateCycle ?: ''}"></td>
                        <td th:text="${item.otherUpdateCycle ?: ''}"></td>
                        <td th:text="${item.isPublish ?: ''}"></td>
                        <td th:text="${item.notPublishReason ?: ''}"></td>
                        <td th:text="${item.regionName ?: ''}"></td>
                        <td th:text="${item.regionCode ?: ''}"></td>
                        <td th:text="${item.catalogType ?: ''}"></td>
                        <td th:text="${item.extCataVersion ?: ''}"></td>
                        <td th:text="${item.status ?: ''}"></td>
                        <td
                            th:text="${item.createTime != null ? #dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss') : ''}">
                        </td>
                        <td
                            th:text="${item.updateTime != null ? #dates.format(item.updateTime, 'yyyy-MM-dd HH:mm:ss') : ''}">
                        </td>
                        <td th:text="${item.cdTime != null ? #dates.format(item.cdTime, 'yyyy-MM-dd HH:mm:ss') : ''}">
                        </td>
                        <td th:text="${item.cdBatch ?: ''}"></td>
                        <td class="sticky-column">
                            <a href="javascript:void(0)" th:attr="data-item-id=${item.id}"
                                onclick="reuploadCatalogById(this.getAttribute('data-item-id'))"
                                class="action-link">目录详情</a>
                        </td>
                    </tr>
                    <tr th:if="${upDataCatalogList == null or upDataCatalogList.empty}">
                        <td colspan="41" style="text-align: center;">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination" id="updatacatalog-pagination" th:if="${totalPages > 1}">
            <!-- 上一页按钮 -->
            <button th:if="${currentPage == 1}" disabled>上一页</button>
            <button th:if="${currentPage > 1}" th:onclick="'goToPageByNumber(' + ${currentPage - 1} + ')'">上一页</button>

             <!-- 首页 -->
            <button th:if="${currentPage > 3}" th:onclick="'goToPageByNumber(1)'">1</button>
            <span th:if="${currentPage > 4}">...</span>

            <!-- 页码 -->
            <span th:each="pageNum : ${#numbers.sequence((currentPage > 2 ? currentPage - 2 : 1), (currentPage + 2 < totalPages ? currentPage + 2 : totalPages))}">
                <button th:if="${pageNum != currentPage}" th:text="${pageNum}"
                    th:onclick="'goToPageByNumber(' + ${pageNum} +')'"></button>
                <button th:if="${pageNum == currentPage}" th:text="${pageNum}" disabled></button>
            </span>

            <!-- 尾页 -->
            <span th:if="${currentPage + 3 < totalPages}">...</span>
            <button th:if="${currentPage + 2 < totalPages}" th:text="${totalPages}"
                th:onclick="'goToPageByNumber(' + ${totalPages} +')'"></button>

            <!-- 下一页按钮 -->
            <button th:if="${currentPage < totalPages}"
                th:onclick="'goToPageByNumber(' + ${currentPage + 1} +')'">下一页</button>
            <button th:if="${currentPage == totalPages}" disabled>下一页</button>

            <!-- 跳转到指定页 -->
            <div style="margin-left: 20px;">
                <span>跳转到</span>
                <input type="number" id="up-data-catalog-page-input" min="1" th:attr="max=${totalPages}"
                    th:value="${currentPage}" style="width: 50px; padding: 3px; margin: 0 5px;">
                <span>页</span>
                <button type="button"
                    onclick="goToPageByNumber(document.getElementById('up-data-catalog-page-input').value)">确定</button>
            </div>
        </div>
    </div>
</body>

</html>